// mix-in class和id
.a,
#b {
  color: red;
}

.mixin-class {
  .a();
}

.mixin-id {
  #b();
}


// mixin不输出
.my-mixin {
  color: black;
}

.my-other-mixin() {
  background: white;
}

.class {
  .my-mixin();
  .my-other-mixin();
}

// Selectors in Mixins
.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}

button {
  .my-hover-mixin();
}

// Namespaces
#my-library {
  .my-mixin() {
    color: black;
  }
}

.class {
  #my-library.my-mixin();
}

// !important
.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}

.unimportant {
  .foo();
}

.important {
  .foo() !important;
}


// 不带参数
.wrap() {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre {
  .wrap()
}


// 带参数的Mixins
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .border-radius(4px);
}

.button {
  .border-radius(6px);
}

// 带默认参数的Mixins
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .border-radius();
}

// 指定命名参数
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}

.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}

.class2 {
  .mixin(#efca44; @padding: 40px);
}

//arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}

.big-block {
  .box-shadow(2px; 5px);
}

// Using Mixins as Functions
.average(@x, @y) {
  @result: ((@x + @y) / 2);
}

div {
  padding: .average(16px, 50px)[@result];
}


//  Unlocking mixins & variables into caller scope
.mixin() {
  @width: 100%;
  @height: 200px;
}

.caller {
  .mixin();
  width: @width;
  height: @height;
}

// Aliasing Mixins
#theme {
  .colors(light) {
    primary: purple;
  }

  .colors(dark) {
    primary: black;
    secondary: grey;
  }
}

.navbar {
  @colors: #theme.colors(dark);
  background: @colors[primary];
}